<!DOCTYPE HTML>
<html>
	<head>
		<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=1.0">
		<meta name="apple-mobile-web-app-capable" content="yes" />
		<meta http-equiv="Content-type" content="text/html; charset=utf-8">
		<title>Viewer</title>	
			
		<script type="text/javascript" charset="utf-8" src="jquery.js"></script>
		<script type="text/javascript" src="jquery.mobile-1.1.0.min.js"></script>
		<script type="text/javascript" src="jsrender.js"></script>
		<script type="text/javascript" src="jquery.form.js"></script>
		
		<link href="jquery.mobile-1.1.0.min.css" rel="stylesheet" />
		<link href="css/file-upload.css" rel="stylesheet" />
		<style type="text/css">
			.ui-header .ui-title { overflow: visible !important;  white-space: normal !important; margin: .6em 25% .8em 30%; }
			.tpl {display: none !important; }
			.e { margin: 2px 3px; border: 1px solid black; border-radius: 10px; padding: 5px;}
			.e .e_header { font: bolder; font-size: 14px;  }
			.e .e_thumb img { max-width:96%; max-height:100%; }
			.e .e_body { font-size: 12px; }
			.e .e_actions {  }
			.log { display: none; }
		</style>

	</head>
	<body >
	
		<script id="node_tpl" type="text/x-jsrender">
			<div class="e">
				<h2 class="e_header" >{{>label}}:{{>title}}</h2>
				<div class="e_thumb" ><img alt="" src="{{>thumbnail_url}}"></div>
				<div class="e_body" >{{>content}}</div>
				<div class="e_actions" >						
					<a href="javascript: sendMessage()" data-role="button" data-icon="check">{{>button}}</a> 
				</div>
			</div>
		</script>
		<script id="category_tpl" type="text/x-jsrender">
			<option value="{{>id}}">{{>name}}</option>
		</script>
	
		<div data-role="page" id="home_page">

			<div data-role="header">				
				<a style="" id="fb_login_page" href="javascript: doFbLogin()" data-icon="gear" class="ui-btn-left">Login</a>
				<a style="display: none;" id="fb_logout_page" href="javascript: FacebookUserUtil.logout()" data-icon="gear" class="ui-btn-left">Logout</a>
				<h1 class="ui-title" role="heading" aria-level="1">Active Info</h1>				
				<a id="submit_page" style="display: none;" href="#submit_page" data-icon="gear" class="ui-btn-right">Submit</a>
			</div>
	
			<div data-role="content">
				<div id="problem_list"></div>		
				<div id="solution_list" style="display: none;"></div>				
			</div>
			
			<div data-role="footer" data-id="foo1" data-position="fixed" >		
				<div data-role="navbar">
					<ul id="home_nav">
						<li><a href="#" for="#problem_list" class="ui-btn-active ui-state-persist" >Problems</a></li>
						<li><a href="#" for="#solution_list" >Solutions</a></li>						
					</ul>
				</div>
			</div>
			<div class="log" id="logs" ></div>
		</div>
		
		<div data-role="page" id="fb_login_page">

			<div data-role="header">				
				<h1 class="ui-title" role="heading" aria-level="1">Login</h1>
				<a href="#home_page" data-icon="gear" class="ui-btn-right">Home</a>
			</div>
	
			<div data-role="content">
				<center><img src="http://drupal.org/files/54640843-ajax-style-loading-gif-animation.gif" alt="Loading..." /></center>
				<iframe id="fb_login_holder" src="http://nguyentantrieu.info/fb-app-session.php" style="0px; height:0px; border: 0 none;display: none;"></iframe>
			</div>		
			
		</div>
		
		<div data-role="page" id="submit_page">

			<div data-role="header">				
				<h1 class="ui-title" role="heading" aria-level="1">Submit Info</h1>
				<a href="#home_page" data-icon="gear" class="ui-btn-right">Home</a>
			</div>
	
			<div data-role="content">
			
				<input type="button" onclick="postToMyWall()" value="postToMyWall" />
				<br />
				<form id="f_submit_active_info" action="http://greengarstudios.com/bt2/index.php/info_node/submit" method="post">
				
					<select name="is_problem" id="select-is_problem">
						<option value="0">I have a solution</option>
						<option value="1">I have a problem</option>
					</select>
					<br>
				
					<input name="title" placeholder="Title" />					
					<textarea name="content" placeholder="Content" rows="2"></textarea>
					
					<br>				
					
					<label for="select-category" class="select">Select category:</label>
					<select name="category" id="select-category"></select>
										
					<div data-role="fieldcontain">
					   <label for="slider-price">Price range:</label>
					   <input type="range" name="price" id="slider-price" value="0" min="0" max="100"  />
					</div>
					
					<a id="btn_submit_info" href="#" data-icon="check" data-role="button">Submit</a>
				</form>
				<br />
				<form action="http://nguyentantrieu.info/mads/upload.php" method="post" enctype="multipart/form-data" >
					<div>Filename (only "jpg", "jpeg", "gif", "png" allowed) :</div>					 
					<label class="file-upload">
						<span><strong>Upload file</strong></span>
						<input type="file" name="file" />
					</label>
					<br />
					<input type="submit" name="submit" value="Submit" />
				</form>
				
				<div class="log" id="logs2" ></div>
			</div>		
			
		</div>
		
		<div data-role="page" id="login_page">

			<div data-role="header">				
				<h1 class="ui-title" role="heading" aria-level="1">Login</h1>
				<a href="#home_page" data-icon="gear" class="ui-btn-right">Home</a>
			</div>
	
			<div data-role="content">
				<form id="f_submit_active_info" action="http://greengarstudios.com/bt2/index.php/info_node/login" method="post">
				
					<input name="username" placeholder="Username" />
					<input type="password" name="password" placeholder="Password" />
					
					<a id="btn_login" href="#" data-icon="check" data-role="button">Login</a>
				</form>
			</div>			
		</div>	
		
	
	</body>
	
	<script type="text/javascript">
		function log(s) {
			$('#logs').html( $('#logs').html() + "<br>" + s);
		}
		
		function showListView(nav_id) {
			$('#home_page div[data-role="content"] > div').hide();
			$(nav_id).html('').show();			
			getData();
		}
		
		
		function getLocation()
		{
		  	if (navigator.geolocation)
		    {
		    	navigator.geolocation.getCurrentPosition(showPosition);
		    }
		 	 else{
		 		 alert("Geolocation is not supported by this browser.");
		 	}
		}
		function showPosition(position)
		{
		  	var ll = "Latitude: " + position.coords.latitude +  ", Longitude: " + position.coords.longitude;	
		  	var msg = "just test ..." + ll;
			FacebookUserUtil.postToMyWall(msg);
		}
		
		function postToMyWall(){
			getLocation();	
		}
		
		
		function doFbLogin(){
			$.mobile.changePage("#fb_login_page", "slidedown");	
			$("#fb_login_holder").attr('src', 'http://nguyentantrieu.info/fb-app-session.php?login=1&t=' + (new Date().getTime()) );			
		}
		
		function fbLoginOk(name){
			if(name){
				$("#fb_logout_page").show();
				$("#submit_page").show();
				$("#fb_login_page").hide();
			} else {
				$("#submit_page").hide();
				$("#fb_login_page").show();
				$("#fb_logout_page").hide();
			}
		}
		
		function getData(){
			var url = 'http://greengarstudios.com/bt2/index.php/info_node/get_last_ten_nodes?t=' + new Date().getTime();
			var params = {};
			$.get(url, params, function(rs){
				if(rs.status === 'ok'){
					var list = rs.data;
					var container, html = '';		
					for(var i = 0; i< list.length; i++){										
						if( list[i].is_problem === "1" ){
							container = $('#problem_list');		
							list[i].label = 'Problem';
							list[i].button = 'Solve';
							
							if(list[i].thumbnail_url === ''){
								list[i].thumbnail_url = "http://greengarstudios.com/bt2/uploads/icon_problem_man.jpg";
							}
							
							html = $( "#node_tpl" ).render( list[i] );		
						} else {
							container = $('#solution_list');	
							list[i].label = 'Solution';
							list[i].button = 'Request';
							
							if(list[i].thumbnail_url === ''){
								list[i].thumbnail_url = "http://tutorialqueen.com/wp-content/uploads/2008/06/photoshop-ecommerce-solution-icon13.gif";
							}
							
							html = $( "#node_tpl" ).render( list[i] );		
						}
						container.html( container.html() + html).trigger('create');						
					}
				}
				//log(rs.data[0].title);
			});
		}

		
		$(document).ready(function() { 
			getData();
			
			$('#home_nav a').each(function(){
				$(this).tap(function(){
					showListView( $(this).attr('for') );
				});
			});			
			
		    var options = { 
		        target:        '#logs2'   // target element(s) to be updated with server response 
		        //beforeSubmit:  showRequest,  // pre-submit callback 
		        //success:       showResponse  // post-submit callback 
		 
		        // other available options: 
		        //url:       url         // override for form's 'action' attribute 
		        //type:      type        // 'get' or 'post', override for form's 'method' attribute 
		        //dataType:  null        // 'xml', 'script', or 'json' (expected server response type) 
		        //clearForm: true        // clear all form fields after successful submit 
		        //resetForm: true        // reset the form after successful submit 
		 
		        // $.ajax options can be used here too, for example: 
		        //timeout:   3000 
		    };		 
 
		    $('#btn_submit_info').tap(function() { 		      
		        $('#f_submit_active_info').ajaxSubmit(options); 
		        $.mobile.changePage("#home_page", "slideup");			
		        //history.back();
		        return false;
		    }); 
		    
		    $.get('http://greengarstudios.com/bt2/index.php/info_node/get_categories',{},function(rs){
		    	if(rs.status === 'ok'){					
					var html = $( "#category_tpl" ).render( rs.data );	
					$('#select-category').html( html ).trigger('create');
				}
		    });
		}); 
		
	</script>
</html>
